<template>
  <div>
    <div class="top-panel__box">
      <el-form :inline="true" :model="searchForm" size="small" ref="searchForm">
        <el-form-item prop="labelName">
          <el-input placeholder="搜索标签名称" v-model="searchForm.labelName" clearable>
            <el-button slot="append" type="primary" icon="el-icon-search" @click="getList(1)"></el-button>
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <el-button type="success" size="mini" @click="submit" class="submit" plain>添加</el-button>
    <div class="DistBox">
      <el-row class="userSearchModule">
        <el-row class="table-top">
          <pagination :pageNum.sync="searchForm.pageNum" :curSizes.sync="searchForm.pageSize" :pageSizes="[10]" :total="usertotal" @getList="getList" />
        </el-row>
        <el-table :row-key="getRowKey" @row-click="rowClick" :data="userSearchList" class="tc-table" size="small" ref="multipleTable" @selection-change="userSelectionChange">
          <el-table-column type="selection" width="60" fixed="left" :selectable="selectable"></el-table-column>
          <template v-for="(column, index) in USER_LABEL_HEAD_LIST">
            <el-table-column :prop="column.prop" :label="column.label" :formatter="column.formatter" :key="index" :show-overflow-tooltip="true">
            </el-table-column>
          </template>
        </el-table>
      </el-row>
      <el-row class="userDistModule">
        <el-row class="table-top">
          <pagination :pageNum.sync="labelInForm.pageNum" :curSizes.sync="labelInForm.pageSize" :total="showLabelInList.length" />
        </el-row>
        <el-table :data="showLabelInList.slice((labelInForm.pageNum-1)*labelInForm.pageSize,labelInForm.pageNum*labelInForm.pageSize)" class="tc-table" size="small">
          <template v-for="(column, index) in USER_LABEL_HEAD_LIST">
            <el-table-column :prop="column.prop" :label="column.label" :formatter="column.formatter" :key="index" :show-overflow-tooltip="true">
            </el-table-column>
          </template>
          <el-table-column prop="operation" label="操作" class-name="oper-col" :width="85">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" plain @click="onRemoveInUser(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="clear"></div>
    </div>
  </div>
</template>

<script>
import { USER_LABEL_HEAD_LIST } from '../js/contant.js'
import api from '../api'
import { CONSTANT_OBJ } from '@/utils/constant'
export default {
  props: { labelData: Array, userId: String },
  data () {
    return {
      USER_LABEL_HEAD_LIST,
      searchForm: {
        labelName: '',
        pageNum: 1,
        pageSize: 10
      },
      usertotal: 0,
      userSearchList: [],
      showLabelInList: [],
      // userId: '',
      labelInForm: {
        pageNum: 1,
        pageSize: 10
      },
      labelSelectionList: []
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    // 获取用户数据
    getList (val) {
      this.searchForm.pageNum = val || this.searchForm.pageNum
      api.postQueryLabelData(this.searchForm).then(res => {
        const { responseCode, data } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.userSearchList = data.list || []
          this.usertotal = parseInt(data.total) || 0
        }
      }).finally(() => {
      })
    },
    // 获取选中用户数据
    getInList () {
      this.showLabelInList = this.labelData
    },
    submit () {
      if (this.labelSelectionList.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择标签',
          duration: 2000
        })
        return false
      }
      let data = []
      this.showLabelInList.forEach(item => {
        data.push(item.labelId)
      })
      data = [...this.labelSelectionList, ...data]
      this.addUserData({ userId: this.userId, labelIds: data })
    },
    addUserData (data) {
      api.postUserRelateLabelData(data).then(res => {
        const { responseCode } = res
        if (responseCode === CONSTANT_OBJ.RES_SUCCESS) {
          this.labelSelectionList = []
          this.$refs.multipleTable.clearSelection()
          this.$emit('getUserData')
        }
      }).finally(() => {
      })
    },
    selectable (row, index) {
      const { labelId } = row
      let labelIdArr = []
      this.showLabelInList.forEach(item => {
        labelIdArr.push(item.labelId)
      })
      let isInclue = labelIdArr.includes(labelId)
      return !isInclue
    },
    userSelectionChange (val) {
      this.labelSelectionList = []
      val.forEach((value) => {
        this.labelSelectionList.push(value.labelId)
      })
    },
    rowClick (row, column, event) {
      let tempLabel = this.showLabelInList.slice((this.labelInForm.pageNum - 1) * this.labelInForm.pageSize, this.labelInForm.pageNum * this.labelInForm.pageSize)
      let labelRes = tempLabel.filter(v => v.labelId === row.labelId)
      if (labelRes.length > 0) return
      let temp = [...this.labelSelectionList]
      let res = temp.map(ele => ele === row.labelId)
      if (res.length > 0) {
        let result = temp.map(ele => ele !== row.labelId)
        this.labelSelectionList = [...result]
        this.$refs['multipleTable'].toggleRowSelection(row, false)
      } else {
        this.labelSelectionList.push(row.labelId)
        this.$refs['multipleTable'].toggleRowSelection(row, true)
      }
    },
    getRowKey (row) {
      return row.labelId
    },
    // 删除
    onRemoveInUser (row) {
      let labelIds = []
      let data = this.showLabelInList.filter(item => {
        return item.labelId !== row.labelId
      })
      data.forEach(item => {
        labelIds.push(item.labelId)
      })
      this.addUserData({ userId: this.userId, labelIds: labelIds })
    },
    userHandleCurrentChange (currentPage) {
      this.labelInForm.pageNum = currentPage
    },
    userHandleSizeChange (size) {
      this.labelInForm.pageSize = size
    }
  },
  watch: {
    labelData: {
      deep: true,
      handler (newValue) {
        this.getInList()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.submit {
  width: 100%;
  margin: 16px 0;
}
.distBox {
  position: relative;
  font-size: 0;
}
.table-top {
  margin: 20px 0 10px;
}
.userSearchModule,
.userDistModule {
  display: inline-block;
  width: 48%;
  vertical-align: top;
}

.userSearchModule {
  margin-right: 2%;
}
</style>
